import yxtjTemplate from './tjfx/yxjj.js';


//顶部导航实例
var navTitle=new Vue({
    el:'#title-nav',
    data:{
        navIndex:0,
        headList:[
            {'active':'head-active','name':'账单'},
        ]
    },
    methods: {
        //点击
        ywClick:function (item,index) {
            let _this=this;
            _this.navIndex=index;
            main.navIndex=index;
        },
    }
});

//主内容外部框组件
const mainContent={
    data(){
        return{
            titles:[],//导航数组
            lightIndex:1,//高亮标识
        }
    },
    template:`
         <div class="main-right">
            <div class="mright-title" id="main-nav" v-cloak>
                <!--通过$routes获取路由传递的meta，进行topBar导航赋值-->
                <!--根据meta长度确定当前高亮标签，是否显示返回功能，点击标签跳转功能-->
                <span v-cloak :class="{'first':index==0,'last':index==lightIndex}" v-for="(item,index) in titles" @click="index>0?jumpTo(item,index):''"><s></s>{{item.name}}<b></b></span>
                <span class="shadow"><s></s>遮挡层<b></b></span>
                <div @click="returnClick" v-show="titles.length>2"><i></i>返回</div>
            </div>
            <div class="mright-content"  id="main-content">
                <!--根据meta内keepAlive属性确定是否需要缓存-->
                <keep-alive>
                    <router-view v-if="$route.meta.keepAlive"></router-view>
                </keep-alive>
                <!--将template模板放在这里-->
                <router-view v-if="!$route.meta.keepAlive"></router-view>
            </div>
         </div>`,
    methods:{
        //返回功能
        returnClick:function () {
            this.titles.pop();//删除数组最后一个元素
            let _length=this.titles.length;
            //this.lightIndex=_length-1;
            router.push(this.titles[_length-1].path);
        },
        //跳转功能
        jumpTo:function (item,index) {
            //this.lightIndex=index;//高亮标识赋值为跳跃对象的index
            router.push(item.path);
        },
    },
    watch:{
        //监听url是否发生改变,这里逻辑很复杂！
        '$route'(to,from){
            let _this=this;
            let num=[];
            //判断to与from是否存在关联
            if(to.meta.highLevel==from.name||from.meta.highLevel==to.name||from.asd==to.meta.highLevel||from.meta.highLevel==to.asd){//当切换的页面存在关联
                if(_this.lightIndex+1<to.meta.breadcrumb.length){//前往子级界面
                    //生成tab
                    for(let i of to.meta.breadcrumb){
                        num.push(i);
                    }
                    _this.titles=num;//赋值
                    console.log(_this.titles);
                    _this.lightIndex=_this.titles.length-1;//高亮下标赋值
                    console.log(_this.lightIndex);
                }else{//查看父级界面
                    _this.lightIndex-=1;
                }
            }else{//不存在关联
                //生成tab
                for(let i of to.meta.breadcrumb){
                    num.push(i);
                }
                _this.titles=num;//赋值
                _this.lightIndex=_this.titles.length-1;//高亮下标赋值
            }
        }
    },
    created:function(){
        let _route=this.$route;
        let num=[];
        //遍历路由元信息生成tab导航
        for(let i of _route.meta.breadcrumb){
            num.push(i);
        }
        this.titles=num;
        this.lightIndex=this.titles.length-1;
    }
};

//路由配置
const router=new VueRouter({
    routes:[
        //主入口主路径
        {
            path:'/fxzx/',
            name:'fxzx',
            component:mainContent,
            props:true,
            //人员，事件，物品，单位四个父入口
            children:[
                //path:路径，name:路径名称，component:路径对应组件
                //meta注释，highLevel:对应的上级的信息
                //breadcrumb:元信息，用以生成tab
                //keepAlive:判断生成页面是否是依赖缓存的页面的布尔值

                {//警情类别统计
                    path:'tjfx/jqlbtj',
                    name:'jqlbtj',
                    component:yxtjTemplate,
                    meta:{
                        'breadcrumb':[
                            {'name':'账单','path':''},{'name':'个人账单','path':'/fxzx/tjfx/jqlbtj'}],
                        'highLevel':'个人账单',
                        'keepAlive':'true','navIndex':'3','saIndex':'0'}
                },


            ]
        },
        {path:'*',redirect:'/fxzx/tjfx/jqlbtj'}
    ]
});

var main=new Vue({
    router,
    data:{
        ywIndex:0,
        erIndex:0,
        saIndex:0,
        navIndex:0,
        menuList:[//默认样式，点击样式，文本
            {'normal':'jjqk-item','span':'jjqk-item-span','active':'left-active','txt':'账单','path':'/fxzx/tjfx/jqlbtj','zt':true,'children':[
                {'normal':'jjqk-item','active':'left-active2','txt':'个人账单','path':'/fxzx/tjfx/jqlbtj'},
            ]}

        ],
        list:[],
    },
    methods:{
        yjClick:function (item,index) {
            let _this=this;
            _this.ywIndex=index;
            item.zt=!item.zt;
            router.push(item.path);//跳转
        },
        ejClick:function (item,index,index1) {
            let _this=this;
            _this.ywIndex=index;
            _this.erIndex=index1;
            item.zt=!item.zt;
            router.push(item.path);//跳转
        },
        sjClick:function (item,index,index1,index2) {
            let _this=this;
            _this.ywIndex=index;
            _this.erIndex=index1;
            _this.saIndex=index2;
            item.zt=!item.zt;
            router.push(item.path);//跳转
        }
    },
    created:function () {
        let _this=this;
        _this.list=_this.menuList;
        router.push(_this.list[0].path);//跳转
    },
    watch: {
        navIndex:function (newVal) {
            let _this=this;
            if(newVal==0){
                _this.list=_this.menuList;

            }else if(newVal==1){
                _this.list=_this.menuList2;

            }else if(newVal==2){
                _this.list=_this.menuList3;
            }else {
                _this.list=_this.menuList3;
            }
            _this.ywIndex=0;
            _this.erIndex=0;
            _this.saIndex=0;
            router.push(_this.list[0].path);//跳转
        }
    },

}).$mount('#main');//挂载







